---
title: "Accessibility Checker Rule Help: WCAG21_Style_Viewport"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

* People with low vision using screen magnification

### Why is this important?

To support people with low vision, any visually rendered text must scale up to 200% of the default content size, without loss of content or functionality and without requiring scrolling in two dimensions. When viewport units are applied to text (generally via font-size in CSS), they are relative to the viewport and this does not allow for text resize by browser zooming or adjusting text-size.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### Check that text sized using viewport units can be resized up to 200%
The text must scale up to 200% without loss of content or functionality

[IBM 1.4.4 Resize Text](https://www.ibm.com/able/guidelines/ci162/resize_text.html) | [IBM 1.4.10 Reflow](https://www.ibm.com/able/guidelines/ci162/reflow_71.html) | [WCAG 2.1 failure technique F94](https://www.w3.org/WAI/WCAG21/Techniques/failures/F94)

<div id="locSnippet"></div>

### What to do

* Implement any of the sufficient techniques of the related WCAG requirement using font size units or technology that can scale up to 200% without loss of content or functionality, and without requiring scrolling in two dimensions.


</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)